<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64">
      <path
        d="M603.413681 291.412536m-60.339779 60.339779l-362.038672 362.038672q-60.339779 60.339779-120.679557 0l0 0q-60.339779-60.339779 0-120.679557l362.038672-362.038672q60.339779-60.339779 120.679557 0l0 0q60.339779 60.339779 0 120.679557Z"
        fill="#F86882" p-id="3212"></path>
      <path
        d="M965.452353 653.451208m-60.339779 60.339779l0 0q-60.339779 60.339779-120.679557 0l-362.038672-362.038672q-60.339779-60.339779 0-120.679557l0 0q60.339779-60.339779 120.679557 0l362.038672 362.038672q60.339779 60.339779 0 120.679557Z"
        fill="#FF963F" p-id="3213"></path>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  transform: rotate(90deg);
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(270deg);
}
</style>
